<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path;
%>
<!DOCTYPE html>
<html>
<body class="skin-blue"  onload ="drawMonth()">
<!-- header logo: style can be found in header.less -->

<!-- getHeader -->
<s:action name="getHeader" namespace="/privilege" executeResult="true"/>
<div class="wrapper row-offcanvas row-offcanvas-left">

    <!-- getMenus -->
    <s:action name="getMenus" namespace="/privilege" executeResult="true"/>

    <!-- Right side column. Contains the navbar and content of the page -->
    <aside class="right-side">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>运营数据
                <small>医生接单情况汇总</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                <li><a href="#">Tables</a></li>
                <li class="active">Data tables</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <%--<div class="box">

                        <div class="box">

                            <div class="box-body">

                                <form action="javascript:searchUser();" class="form-inline" name="searchForm">
                            
                                   <div class="row" align="center">
                                    <button type="button" onclick="drawMonth()" class="btn btn-info">查询</button>
                                    </div>
                                </form>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                     --%><div class="nav-tabs-custom">
                                <!-- Tabs within a box -->
                                <div class="tab-content no-padding">
                                	<br/>
                                    <!-- Morris chart - Sales -->
                                    <div class="tab-pane active"  id="chart_div" style=" position: relative;min-height: 900px">
                               		    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
                               		    <hr/>
                               		    <div id="container1" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
                                    </div>
                                </div>
                     </div>
                </div>
            </div>

        </section><!-- /.content -->
    </aside><!-- /.right-side -->
</div><!-- ./wrapper -->
</body> 


<script type="text/javascript">


var  xdata2 =[
				[501,545,556,456,489,612,589,567,545,521,545,567,543,600,589,555,498,465,455,567,500,501,589,586,567,607,612,600,598,589,605],
				[678,699,784,790,790,670,798,783,949,899,798,789,819,796,805,745,800,798,865,804,802,799,778,798,837,885,788,749],
				[778,779,744,690,740,690,698,673,809,794,780,689,749,696,705,805,810,899,965,914,992,899,932,948,917,880,988,969,979,980,986],
				[980,1090,1008,1230,990,980,890,1093,1009,1200,1390,1289,1123,1432,1004,998,1001,1003,834,943,945,1024,1143,1031,1097,1231,1267,1132,1230,1150],
				[1080,1170,1238,1220,1090,1203,990,1093,1019,1230,1090,1089,1153,1132,1164,1001,1020,1073,1034,1043,1005,989,980,1121,1039,1131,1027,1002,1090],
				[1580,1770,1338,1020,1190,1403,1490,1431,1100,1130,1290,1389,1453,1332,1364,1146,1430,1109,1344,1303,1232,1543,1080,1021,1239,1331,1421,1462,1490,1500],
				[1620,1670,1435,1229,1430,1303,1490,1465,1300,1430,1690,1489,1253,1332,1364,1346,1230,1142,1304,1150,1032,1243,1380,1421,1639,1631,1321,1462,1670,1770,1798],
				[1710,1500,1575,1529,1630,1603,1590,1645,1506,1550,1595,1470,1550,1437,1567,1547,1430,1542,1554,1756,1535,1746,1680,1629,1638,1831,1821,1840,1973,1870,1798],
				[1923,1970,1835,1823,1840,1903,1840,1743,1900,1930,1989,1983,1876,1889,1778,1808,1900,1970,2073,2066,1965,1978,1862,1999,1956,1990,2000,2003,2070,1970],
				[2590,2374,2165,1939,1970,2403,2690,2895,1990,1860,1990,1999,1977,2080,2376,2146,2509,2207,1978,1978,2045,2045,2065,1990,2010,2080,2188,2061,2370,2230,2208],
				[2360,2216,2689,2126,2325,2456,2245,1956,2365,2615,2463,1956,1896,2321,2148,2385,2369,2363,2486,2356,2369,2156,2314,2289,2346,2568,2623,2452,2334,2356]
				];
var xdata1=[
			 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
			 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
			 [0,0,0,0,10,16,48,56,64,80,32,39,52,55,50,95,81,83,81,90,103,93,90,89,83,65,70,79,65,83,108],
			 [94,86,178,182,172,169,187,178,157,182,169,177,166,199,175,183,201,169,161,163,179,193,181,200,172,181,190,180,187,190],
			 [164,206,208,172,192,199,181,188,207,232,179,197,166,189,172,173,174,169,171,140,189,197,171,160,182,191,203,200,197,200,201],
			 [174,196,200,180,192,209,201,201,187,182,169,167,206,177,172,178,184,151,201,160,179,187,191,170,192,181,203,200,179,180],
			 [204,216,208,200,202,239,211,221,211,209,188,200,216,197,180,209,194,221,201,194,149,207,201,202,182,201,203,210,209,200,256],
			 [368,422,475,442,362,378,414,505,482,409,389,368,394,452,421,452,381,448,399,338,470,493,398,402,392,451,399,435,405,335,314],
			 [378,422,375,342,372,398,410,345,372,309,329,378,444,432,321,353,351,348,299,339,350,393,373,472,372,461,399,415,395,375],
			 [249,237,258,280,258,241,302,323,267,229,299,289,323,332,292,310,318,328,338,401,348,252,231,213,320,240,337,375,376,389,482],
			 [402,385,302,298,287,285,285,245,285,223,238,256,212,200,236,263,236,215,256,285,212,245,212,198,221,195,185,196,185,225]
			];
var ydata=[
			["1月1日","1月2日","1月3日","1月4日","1月5日","1月6日","1月7日","1月8日","1月9日","1月10日","1月11日","1月12日","1月13日","1月14日","1月15日","1月16日","1月17日","1月18日","1月19日","1月20日","1月21日","1月22日","1月23日","1月24日","1月25日","1月26日","1月27日","1月28日","1月29日","1月30日","1月31日"],
			["2月1日","2月2日","2月3日","2月4日","2月5日","2月6日","2月7日","2月8日","2月9日","2月10日","2月11日","2月12日","2月13日","2月14日","2月15日","2月16日","2月17日","2月18日","2月19日","2月20日","2月21日","2月22日","2月23日","2月24日","2月25日","2月26日","2月27日","2月28日"],
			["3月1日","3月2日","3月3日","3月4日","3月5日","3月6日","3月7日","3月8日","3月9日","3月10日","3月11日","3月12日","3月13日","3月14日","3月15日","3月16日","3月17日","3月18日","3月19日","3月20日","3月21日","3月22日","3月23日","3月24日","3月25日","3月26日","3月27日","3月28日","3月29日","3月30日","3月31日"],
			["4月1日","4月2日","4月3日","4月4日","4月5日","4月6日","4月7日","4月8日","4月9日","4月10日","4月11日","4月12日","4月13日","4月14日","4月15日","4月16日","4月17日","4月18日","4月19日","4月20日","4月21日","4月22日","4月23日","4月24日","4月25日","4月26日","4月27日","4月28日","4月29日","4月30日"],
			["5月1日","5月2日","5月3日","5月4日","5月5日","5月6日","5月7日","5月8日","5月9日","5月10日","5月11日","5月12日","5月13日","5月14日","5月15日","5月16日","5月17日","5月18日","5月19日","5月20日","5月21日","5月22日","5月23日","5月24日","5月25日","5月26日","5月27日","5月28日","5月29日","5月30日","5月31日"],
			["6月1日","6月2日","6月3日","6月4日","6月5日","6月6日","6月7日","6月8日","6月9日","6月10日","6月11日","6月12日","6月13日","6月14日","6月15日","6月16日","6月17日","6月18日","6月19日","6月20日","6月21日","6月22日","6月23日","6月24日","6月25日","6月26日","6月27日","6月28日","6月29日","6月30日"],
			["7月1日","7月2日","7月3日","7月4日","7月5日","7月6日","7月7日","7月8日","7月9日","7月10日","7月11日","7月12日","7月13日","7月14日","7月15日","7月16日","7月17日","7月18日","7月19日","7月20日","7月21日","7月22日","7月23日","7月24日","7月25日","7月26日","7月27日","7月28日","7月29日","7月30日","7月31日"],
			["8月1日","8月2日","8月3日","8月4日","8月5日","8月6日","8月7日","8月8日","8月9日","8月10日","8月11日","8月12日","8月13日","8月14日","8月15日","8月16日","8月17日","8月18日","8月19日","8月20日","8月21日","8月22日","8月23日","8月24日","8月25日","8月26日","8月27日","8月28日","8月29日","8月30日","8月31日"],
			["9月1日","9月2日","9月3日","9月4日","9月5日","9月6日","9月7日","9月8日","9月9日","9月10日","9月11日","9月12日","9月13日","9月14日","9月15日","9月16日","9月17日","9月18日","9月19日","9月20日","9月21日","9月22日","9月23日","9月24日","9月25日","9月26日","9月27日","9月28日","9月29日","9月30日"],
			["10月1日","10月2日","10月3日","10月4日","10月5日","10月6日","10月7日","10月8日","10月9日","10月10日","10月11日","10月12日","10月13日","10月14日","10月15日","10月16日","10月17日","10月18日","10月19日","10月20日","10月21日","10月22日","10月23日","10月24日","10月25日","10月26日","10月27日","10月28日","10月29日","10月30日","10月31日"],
		    ["11月1日","11月2日","11月3日","11月4日","11月5日","11月6日","11月7日","11月8日","11月9日","11月10日","11月11日","11月12日","11月13日","11月14日","11月15日","11月16日","11月17日","11月18日","11月19日","11月20日","11月21日","11月22日","11月23日","11月24日","11月25日","11月26日","11月27日","11月28日","11月29日","11月30日"]
		  ]	

		function drawDay(month){
			//$("#divYearArea").hide();
				var monthc = month+1;
			  	Highcharts.chart('container1', {
		
		      	    title: {
		      	        text: '运营数据2017年'+monthc+"月"
		      	    },
		
		      	    yAxis: {
		      	        title: {
		      	            text: '成交笔数'
		      	        }
		      	    },
		      	    legend: {
		      	        layout: 'vertical',
		      	        align: 'right',
		      	        verticalAlign: 'middle'
		      	    },
		
		            xAxis: {
		                categories: ydata[month],
		                title: {
		                    text: '日期'
		                },
		               labels:{
		               		rotation: 90
		               }
		            }, 
		      	    series: [{
		      	        name: '免费',
		      	        data: xdata1[month]
		      	    }, {
		      	        name: '收费',
		      	         data: xdata2[month]
		      	    }]
					
					
		      	});  
			}

		

		function drawMonth(){
			Highcharts.chart('container', {

	      	    title: {
	      	        text: '运营数据 '
	      	    },

	      	    yAxis: {
	      	        title: {
	      	            text: '成交笔数'
	      	        }
	      	    },
	      	    legend: {
	      	        layout: 'vertical',
	      	        align: 'right',
	      	        verticalAlign: 'middle'
	      	    },

	            xAxis: {
	                categories: ['2017年1月','2017年2月','2017年3月','2017年4月','2017年5月','2017年6月','2017年7月','2017年8月','2017年9月','2017年10月','2017年11月'],
	                title: {
	                    text: '月份'
	                },
	               labels:{
	               		rotation: 90
	               }
	            }, 
	      	    series: [{
	      	        name: '免费',
	      	        data: [0,0,1860,5201,5770,5549,6341,12793,11322,9437,7468]
	      	    }, {
	      	        name: '收费',
	      	         data: [17119,22295,25877,32737,33640,39931,44039,50647,57932,67408,69903]
	      	    }],
				
				plotOptions: {
	            series: {
	                cursor: 'pointer',
	                point: {
	                    events: {
	                        // 数据点点击事件
	                        // 其中 e 变量为事件对象，this 为当前数据点对象
	                        click: function (e) {
							
									drawDay(this.x);
	                           // $('.message').html(  this.x + ':<br/>  访问量：' +this.y );
	                        }
	                    }
	                },
	                marker: {
	                    lineWidth: 1
	                }
	            }
					}
				

	      	});    
			}


</script>

<head>
   <meta charset="UTF-8">
    <title>AdminLTE | Data Tables</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <script type="text/javascript" src="<%=basePath%>/js/admin/utils.js"></script>
    <script type="text/javascript" src="<%=basePath%>/js/base/listtable.js"></script>
    <link href="<%=basePath%>/AdminLTE/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <script type="text/javascript" src="<%=basePath%>/AdminLTE/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="<%=basePath%>/AdminLTE/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script type="text/javascript" src="<%=basePath%>/AdminLTE/js/highcharts.js"></script>
</head>


</html>